<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>OA-个人信息</title>
<link rel="stylesheet" href="./resource/layui/css/layui.css">
<link rel="stylesheet" href="./resource/css/userinfo.css">
<script type="text/javascript" src="./resource/js/jquery-2.0.3.js"></script>
<style type="text/css">
.layui-hide {
	text-align: center;
}

.layui-body {
	left: 50px;
}

#AddEmp {
	right: -860px;
}
</style>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo">
				<img src="./resource/image/logo.png"
					style="width: 200px; height: 58px;">
			</div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
				<iframe id="tianqi" allowtransparency="true" frameborder="0"
					width="410" height="60" scrolling="no"
					src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=3&t=1&v=2&d=2&bd=0&k=&f=ffffff&ltf=009944&htf=cc0000&q=0&e=1&a=1&c=59134&w=410&h=60&align=center"></iframe>
			</ul>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item"><a href="javascript:;"> <img
						src="http://t.cn/RCzsdCq" class="layui-nav-img">
						${sessionScope.emp.empname}
				</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="UserInfo.jsp">修改个人信息</a>
						</dd>
					</dl></li>
				<li class="layui-nav-item"><a href="login.jsp">退出</a></li>
			</ul>
		</div>


		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-shrink="all"
					lay-filter="test">
					<li class="layui-nav-item"><a class="" href="javascript:;"><i
							class="layui-icon"> &#xe637; </i>考勤</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="punch.jsp">打卡</a>
							</dd>
							<c:if test="${sessionScope.emp.position!='员工'}">
								<dd>
									<a href="Hrpattence.jsp">员工考勤查看</a>
								</dd>
							</c:if>
							<dd>
								<a href="MyselfPattence.jsp">自我考勤查看</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="javascript:;"><i
							class="layui-icon">&#xe613; </i>请假管理</a>
						<dl class="layui-nav-child">
							<a href="leavetest.jsp"></i>请假申请</a>
							<c:if
								test="${sessionScope.emp.position!='员工'&&sessionScope.emp.position!='人事'}">
								<dd>
									<a href="LeaveList.jsp">请假审批</a>
								</dd>
							</c:if>
							<c:if test="${sessionScope.emp.position!='经理'}">
								<dd>
									<a href="LeaveMsg.jsp">请假信息查看</a>
								</dd>
							</c:if>
							
						</dl></li>
					<li class="layui-nav-item layui-nav-itemed"><a
						href="javascript:;"><i class="layui-icon">&#xe716; </i>管理</a>
						<dl class="layui-nav-child">
							<c:if
								test="${sessionScope.emp.position!='员工'&&sessionScope.emp.position!='经理'}">
								<dd>
									<a href="GetEmps.jsp">员工管理</a>
								</dd>
							</c:if>
							<c:if test="${sessionScope.emp.position!='员工'}">
								<dd>
									<a href="GetDepts.jsp">部门管理</a>
								</dd>
							</c:if>
							<dd>
								<a href="UserInfo.jsp" class="layui-this">个人信息管理</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="Note.jsp">公告</a></li>
				</ul>
			</div>
		</div>
		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div class="layui-container">
				<div class="layui-row" style="height: 50px;"></div>
				<div class="layui-row layui-row layui-col-space15">
					<div class="layui-col-md4">
						<div class="layui-card">
							<div class="layui-card-header">
								<i class="layui-icon layui-icon-friends"
									style="font-size: 20px; color: #1E9FFF;"></i> <span>员工个人信息</span>
							</div>
							<div class="layui-card-header userheader">
								<div>
									<img src="./resource/image/head.png" alt="个人头像"
										class="userheader userimg">
								</div>
							</div>
							<div class="layui-card-header">
								<span>员工类型:</span> <span class="usermsg" id="position">部门经理</span>
							</div>
							<div class="layui-card-header">
								<span>权限信息:</span> <span class="usermsg" id="positionname">人事经理</span>
							</div>
							<div class="layui-card-header">
								<span>入职时间:</span> <span class="usermsg" id="hiredate">2018-07-12</span>
							</div>
							<div class="layui-card-header">
								<span>最近登入:</span> <span class="usermsg">登陆中</span>
							</div>
						</div>
					</div>
					<div class="layui-col-md1"></div>
					<div class="layui-col-md7">
						<div class="layui-card">
							<div class="layui-card-header" style="height: 60px;"></div>
							<div class="layui-card-header">
								<div class="username" id="empname">提莫队长</div>
							</div>
							<div class="layui-card-header">
								<div class="layui-col-md4">员工编号</div>
								<div class="layui-col-md4" id="empid">1007</div>
							</div>
							<div class="layui-card-header">
								<div class="layui-col-md4">用户名:</div>
								<div class="layui-col-md4" id="username">提莫队长</div>
							</div>
							<div class="layui-card-header">
								<div class="layui-col-md4">员工性别:</div>
								<div class="layui-col-md4" id="sex">男</div>
							</div>
							<div class="layui-card-header">
								<div class="layui-col-md4">所属部门:</div>
								<div class="layui-col-md4" id="deptname">人力资源部</div>
							</div>
							<div class="layui-card-header">
								<div class="layui-col-md4">员工邮箱:</div>
								<div class="layui-col-md4">1561616@nkndi.com</div>
							</div>
							<div class="layui-card-header">
								<div class="layui-col-md4">最后更新时间:</div>
								<div class="layui-col-md4">2018-07-12 18:32</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-row" style="height: 50px;"></div>
				<div class="layui-row">
					<div class="layui-collapse">
						<div class="layui-colla-item">
							<h2 class="layui-colla-title">修改个人信息</h2>
							<div class="layui-colla-content">
								<div class="layui-row layui-col-space15">
									<div class="layui-col-md1"></div>
									<div class="layui-col-md4">
										<!--
											<div class="layui-upload">
												
												<button type="button" class="layui-btn" id="imgregister" name="imgregister">上传头像</button>
												<button type="button" class="layui-btn" id="test9">开始上传</button>
												<div class="layui-upload-list">
													<img class="layui-upload-img userphoto" id="demo1">
													<p id="demoText"></p>
												</div>
											</div>
											-->

										<form action="RegisterFace" method="post"
											enctype="multipart/form-data">
											<input type="file" name="imgheading" id="imgheading" value="" /><br>
											<br> <input type="submit" value="开始上传" /><br>

										</form>

									</div>

									<div class="layui-col-md7 ">
										<div class="">请谨慎提交个人信息, 提交后等待管理员审核</div>
										<div class="layui-card-header" style="height: 15px;"></div>
										<form class="layui-form" action="" id="userinfoupdate">
											<div class="layui-form-item">
												<label class="layui-form-label">员工姓名</label>
												<div class="layui-input-block">
													<input type="text" name="title" required
														lay-verify="required" autocomplete="off"
														class="layui-input" value="提莫队长" id="formempname" readonly>
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">员工ID</label>
												<div class="layui-input-block">
													<!-- 修改原本title用户id输入的name的id -->
													<input type="text" name="empid9" required
														lay-verify="required" autocomplete="off"
														class="layui-input" value="" id="formempid" readonly>
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">员工邮箱</label>
												<div class="layui-input-block">
													<input type="email" name="title" required
														lay-verify="required" autocomplete="off"
														class="layui-input" value="1561616@nkndi.com">
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">旧密码</label>
												<div class="layui-input-inline">
													<input type="password" name="password" required
														lay-verify="required" placeholder="请输旧入密码"
														autocomplete="off" class="layui-input" id="oldpassword">
												</div>
												<div class="layui-form-mid layui-word-aux"
													id="oldpwdcheckmsg"></div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">新密码</label>
												<div class="layui-input-inline">
													<input type="password" name="password" required
														lay-verify="required" placeholder="请输新入密码"
														autocomplete="off" class="layui-input" id="newpassword">
												</div>
												<div class="layui-form-mid layui-word-aux"></div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">确认密码</label>
												<div class="layui-input-inline">
													<input type="password" name="password" required
														lay-verify="required" placeholder="请确认新密码"
														autocomplete="off" class="layui-input"
														id="newpasswordcheck">
												</div>
												<div class="layui-form-mid layui-word-aux" id="checkmsg"></div>
											</div>
											<div class="layui-form-item">
												<div class="layui-input-block">
													<button type="button" class="layui-btn"
														onclick="userinfoupdate()">立即提交</button>
													<button type="button" class="layui-btn"
														onclick="resetpws()">重置</button>
													<input id="checkusername" type="text" hidden="hidden">
													<div class="layui-form-mid layui-word-aux"
														id="changeresult"></div>
												</div>
											</div>
											<div class="layui-form-mid layui-word-aux" id="changeresult"></div>
										</form>
									</div>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->
			© 中软 - JAVA二阶段项目 - 基于人脸识别的考勤系统 by TeamWork_XM
		</div>
	</div>
	<script src="./resource/layui/layui.js"></script>
	<script>
		$.ajax({
			url : "EmpServlet",
			type : "get",
			data : {
				'op' : 'GetEmpInfo',
				'empid' : "${sessionScope.emp.empid}"
			},
			success : function(data) {
				console.log(data);
				setValue(data);
			}
		});
		layui.use('element', function() {
			var element = layui.element;
		});
		//图片上传
		layui
				.use(
						'upload',
						function() {
							var $ = layui.jquery, upload = layui.upload;

							//普通图片上传
							var uploadInst = upload
									.render({
										// 选择器s
										elem : '#test1',
										url : 'EmpServlet' //改成您自己的上传接口
										,
										accept : 'images' //视频
										,

										data : {
											empid : $("#formempid").val()

										//'img':$("#demo1").attr('src')
										} //跟着员工的id一起传图片才知道这是谁的图片
										,
										auto : false //是否自动上传
										,
										bindAction : '#test9' // 绑定的上传那妞
										,
										choose : function(obj) {
											//预读本地文件示例，不支持ie8
											obj
													.preview(function(index,
															file, result) {
														$('#demo1').attr('src',
																result); //图片链接（base64）
														//打印在控制台查看
														//console.log(result);
														//保存到变量中
														var base64 = result;
														console.log($(
																"#formempid")
																.val())

													});
										},

										done : function(res) {
											//如果上传失败
											if (res.code == 0) {
												return layer.msg('上传失败');
												//var basr64=$("#demo1").attr('src');
												//console.log(basr64);
											}
											//console.log($("#demo1").attr('src'));
											//上传成功
										},
										error : function() {
											//演示失败状态，并实现重传
											var demoText = $('#demoText');
											demoText
													.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
											demoText.find('.demo-reload').on(
													'click', function() {
														uploadInst.upload();
													});
										}
									});
						});
		// 表单提交
		layui.use('form', function() {
			var form = layui.form;
			//监听提交
			form.on('submit(*)', function(data) {
				console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		});
		function setValue(data) {
			$("#position").html(data.position.position);
			$("#position").html(data.position.position);
			$("#positionname").html(data.position.positionname);
			$("#hiredate").html(data.emp.hiredate);
			$("#empname").html(data.emp.empname);
			$("#formempname").val(data.emp.empname);
			$("#empid").html(data.emp.empid);
			$("#formempid").val(data.emp.empid);
			$("#username").html(data.emp.username);
			$("#checkusername").val(data.emp.username)
			$("#sex").html(data.emp.sex);
			$("#deptname").html(data.dept.deptname);
		}

		$("#oldpassword").blur(function() {
			$.ajax({
				url : "EmpServlet",
				type : "get",
				dataType : "json",
				data : {
					"op" : "CheckPwd",
					"username" : $("#checkusername").val(),
					"oldpwd" : $("#oldpassword").val()
				},
				success : function(data) {
					console.log(data);
					if (data.code == 200) {
						$("#oldpwdcheckmsg").html("密码输入正确");
					} else {
						$("#oldpwdcheckmsg").html("密码输入有误");
					}
				}
			});
		});

		function userinfoupdate() {
			// 校验密码的正则表达式
			var reg = /^[A-Za-z0-9]{6,16}$/;
			if ($("#newpassword").val() != $("#newpasswordcheck").val()) {
				$('#checkmsg').html("密码不一致, 请重新输入!");
			} else if ($("#oldpassword").val() == $("#newpassword").val()) {
				alert("新旧密码不能一样");
			} else if ($("#oldpwdcheckmsg").html() == "密码输入有误") {
				alert("请输入正确的密码再提交");
			} else if (reg.test($("#newpassword").val()) == false) {
				alert("新密码必须由 6-16位字母、数字组成.");
			} else {
				$.ajax({
					url : "EmpServlet",
					type : "get",
					dataType : "json",
					data : {
						"op" : "ChangePwd",
						"username" : $("#checkusername").val(),
						"newpwd" : $("#newpassword").val(),
					},
					success : function(data) {
						console.log(data);
						$("#changeresult").html(data.msg);
					}
				});
			}
		}
		function resetpws() {
			$("#oldpassword").val("");
			$("#newpassword").val("");
			$("#newpasswordcheck").val("");
			$("#oldpwdcheckmsg").html("");
			$("#oldpwdcheckmsg").html("")
			$("#changeresult").html("");
		}
	</script>
</body>
</html>